<template>
  <el-main>
    <!-- 网格视图 -->
    <div v-if="dashboardStore.viewMode === 'grid'" class="files-grid">
      <div v-for="sheet in dashboardStore.sheets" :key="sheet._id" class="file-card">
        <div class="card-preview" @click="openSheet(sheet._id)">
          <el-icon><Document /></el-icon>
        </div>
        <div class="card-content">
          <div class="card-header">
            <h3 class="card-title">{{ sheet.title }}</h3>
          </div>
          <div class="card-meta">
            <span class="modified-time">
              <el-icon><Timer /></el-icon>
              {{ formatDate(sheet.updatedAt) }}
            </span>
            <div class="collaborators">
              <el-avatar :size="24" :src="sheet.author.avatar">
                {{ sheet.author.username }}
              </el-avatar>
              <!-- <div v-if="sheet.activeUsers?.length > 3" class="more-users">
                +{{ sheet.activeUsers.length - 3 }}
              </div> -->
            </div>
          </div>
        </div>
        <div class="card-actions">
          <el-button circle @click.stop="shareSheet(sheet)">
            <el-icon><Share /></el-icon>
          </el-button>
          <el-button
            :class="isFavorites(sheet.favoriteAuthor) ? 'favorite-btn' : ''"
            circle
            @click.stop="toggleFavorite(sheet)"
          >
            <el-icon><Star /></el-icon>
          </el-button>
          <el-button circle @click.stop="showSheetMenu(sheet)">
            <el-icon><More /></el-icon>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 列表视图 -->
    <div v-else class="files-container">
      <div class="files-list">
        <div class="list-header">
          <div class="header-cell name">名称</div>
          <div class="header-cell modified">修改时间</div>
          <div class="header-cell collaborators">协作者</div>
          <div class="header-cell actions">操作</div>
        </div>

        <div class="list-body">
          <div
            v-for="sheet in dashboardStore.sheets"
            :key="sheet._id"
            class="list-item"
            @click="openSheet(sheet._id)"
          >
            <div class="cell name">
              <el-icon><Document /></el-icon>
              <span>{{ sheet.title }}</span>
            </div>
            <div class="cell modified">
              {{ formatDate(sheet.updatedAt) }}
            </div>
            <div class="cell collaborators">
              <div class="avatar-group">
                <el-avatar :size="24" :src="sheet.author.avatar">
                  {{ sheet.username }}
                </el-avatar>
              </div>
            </div>
            <div class="cell actions">
              <el-button-group>
                <el-button circle @click.stop="shareSheet(sheet)">
                  <el-icon><Share /></el-icon>
                </el-button>
                <el-button :class="isFavorites(sheet.favoriteAuthor) ? 'favorite-btn' : ''" circle @click.stop="toggleFavorite(sheet)">
                  <el-icon><Star /></el-icon>
                </el-button>
                <el-button circle @click.stop="showSheetMenu(sheet)">
                  <el-icon><More /></el-icon>
                </el-button>
              </el-button-group>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-main>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import store from "../stores/module/dashboard";
import formatDate from "../utils/formatDate.ts";
import { getSheet, addFavorites } from "../api/sheet/index.ts";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const dashboardStore = store();
const router = useRouter();
onMounted(() => {
  dashboardStore.getList();
  dashboardStore.getNum();
});
const openSheet = async (id: string) => {
  let result: any = await getSheet({
    id,
    userId: JSON.parse(localStorage.getItem("user") as string)._id,
  });
  if (result.code == 200) {
    router.push(`/sheet/${id}/${JSON.parse(localStorage.getItem("user") as string)._id}`);
  }
};
// 分享表格
const shareSheet = (target: any) => {
  navigator.clipboard.writeText(
    `${window.location.host}/sheet/${target._id}/${
      JSON.parse(localStorage.getItem("user") as string)._id
    }`
  );
  ElMessage.success("表格链接已复制到剪贴板,快去分享吧！");
};

// 收藏表格
const toggleFavorite = async (sheet: any) => {
  let result = await addFavorites({
    id: sheet._id,
    userId: JSON.parse(localStorage.getItem("user") as string)._id,
  });
  if (result.code == 200) {
    dashboardStore.getList();
    dashboardStore.getNum();
    ElMessage.success("收藏成功！");
  }
};

// 显示表格菜单
const showSheetMenu = (sheet: any) => {
  // 实现菜单显示逻辑
  console.log("显示菜单:", sheet);
};

const isFavorites = (authorArr: string | any[]) => {
  return authorArr.includes(JSON.parse(localStorage.getItem("user") as string)._id);
};
</script>

<style scoped lang="scss">
.favorite-btn {
  &:hover {
    .el-icon {
      color: white;
    }
  }
  .el-icon {
    color: #00c853;
  }
}
</style>
